<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/plugin/jquery-1.10.2.min.js"></script>
<title>钉钉网页版1.0</title>
</head>
<body>
	<div id="divRegistForm">
		<input id="nickName" placeholder="要聊天，先起名" maxlength="10" style="width: 300px" />
		<button id="btnRegist" type="button" onclick="regist()">注册</button>
	</div>
	<div id="divChartForm" style="display: none">
		<div id="divChart" style="width: 500px; height: 600px; overflow: auto; border: 1px solid black">
			<table id="tblChart" style="width: 100%; height: auto;">
				<tbody>
					<tr>
						<td align="center">欢迎来到钉钉网页版1.0</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div>
			<textarea id="message" placeholder="发送内容" cols="11" rows="5" style="width: 455px; float: left" ></textarea>
			<button id="btnSend" type="button" style="margin-left: 1px; width: 40px; height: 81px;" onclick="sendMessage()">发送</button>
		</div>
	</div>
</body>
<script type="text/javascript">
	var websocket;

	$(function() {

		$("#message").keypress(function(event) {
			var keynum = (event.keyCode ? event.keyCode : event.which);
			if (keynum == "13") {
				sendMessage();
				return false;
			}
		});
		
		$.ajax({
			url: "check",
			type: "post",
			data: {
				
			},
			success: function(data){
				if(data.nickName){
					$("#nickName").val(data.nickName);
					$("#divRegistForm").hide();
					$("#divChartForm").show();
					createWebSocket();
				}else{
					$("#divRegistForm").show();
					$("#divChartForm").hide();
				}
			}
		});
		
		$(window).on("unload", function(){
			unregist();
		});
	});
	
	function regist(){
		if ($("#nickName").val().trim() === "") {
			alert("请输入昵称!!");
			return;
		}
		$.ajax({
			url: "register",
			type: "post",
			data: {
				nickName: $("#nickName").val().trim()
			},
			success: function(data){
				if(data.msg){
					alert(data.msg);
				}else{
					$("#divRegistForm").hide();
					$("#divChartForm").show();
					createWebSocket();
				}
			}
		});
	}
	
	function unregist(){
		$.ajax({
			url: "unregister",
			type: "post",
			data: {
				nickName: $("#nickName").val().trim()
			},
			success: function(data){
				$("#nickName").val("");
				$("#divRegistForm").show();
				$("#divChartForm").hide();
			}
		});
	}

	function createWebSocket() {
		var wsUri = "ws://192.168.40.101:8091/hiv/springws/websocket.ws";
		websocket = new WebSocket(wsUri);
		websocket.onopen = function(evt) {
			//console.log("Connected !");
		};
		websocket.onmessage = function(evt) {
			//console.log("Received message: " + evt.data);
			if(evt.data==="{{{unregister}}}"){
				alert("先注册，再聊天");
			}else if(evt.data.indexOf("{{{success}}}")!=-1){
				var msg = evt.data;
				msg = msg.replace("{{{success}}}", "");
				$("#tblChart").find("tbody").append("<tr><td align='right'>" + msg + "</td></tr>");
				$("#divChart").scrollTop($("#divChart")[0].scrollHeight);
			}else{
				$("#tblChart").find("tbody").append("<tr><td align='left'>" + evt.data + "</td></tr>");
				$("#divChart").scrollTop($("#divChart")[0].scrollHeight);
			}
		};
		websocket.onerror = function(evt) {
			//console.log("ERROR:" + evt.data);
		};
		websocket.onclose = function(event) {
			console.log("WebSocket:已关闭");
			reconnect();
		};
	}

	function reconnect() {
		console.log("WebSocket:尝试重连");
		try {
			createWebSocket();
		} catch (e) {
			window.setTimeout(function() {
				reconnect();
			}, 3000);
		}
	}

	function sendMessage() {
		if ($("#message").val().trim() === "") {
			alert("请输入发送的内容");
			return;
		}
		var data = {
			sender: $("#nickName").val().trim(),
			message : $("#message").val().trim()
		}
		$("#message").val("");
		websocket.send(JSON.stringify(data));
	}
</script>
</html>